<template>
	<div class="form">
		<div style="width: 50%;margin: auto;">

			<h1>注册</h1>
			<el-form status-icon ref="ruleForm" :rules="rules" :model="formdate" label-width="100px" class="demo-ruleForm" size="small">
				<el-row class="formMain">
					<el-col :span="24">
						<el-form-item label="用户名:" prop="userName" class="lable1">
							<el-input style="width: 200px;" v-model="formdate.userName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="密码:" prop="userPassword" class="lable1">
							<el-input style="width: 200px;" v-model="formdate.userPassword"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="确认密码:" prop="userPasswordTwo" class="lable1">
							<el-input style="width: 200px;" v-model="userPasswordTwo"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="邮箱:" prop="userMailbox" class="lable1">
							<el-input style="width: 200px;" v-model="formdate.userMailbox"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="手机号:" prop="userMobilePhone" class="lable1">
							<el-input style="width: 200px;" v-model="formdate.userMobilePhone"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="验证码:" prop="pass" class="lable1">
							<el-input style="width: 100px;"></el-input>
							<el-tag style="left: 42px;">标签一</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-button style="width: 27%;left: 13%;" type="primary" @click="reginster">注册</el-button>
					</el-col>
					<el-col :span="24">
						<el-radio style="top: 40px;" label="1">
							<el-link type="primary" style="color: #ffffff;">我已阅读并同意(用户协议)</el-link>
						</el-radio>
					</el-col>
				</el-row>
			</el-form>


		</div>

	</div>
</template>

<script>
	import {
		post
	} from '../../plugin/http.js';
	export default {
		name: 'reginster',
		data() {
			let validateUserName = (rule, value, callback) => {
				/*      if (!value) {
				        return callback(new Error('号码不能为空!!'))
				      }
				      setTimeout(() => {
				        if (!phoneReg.test(value)) {
				          callback(new Error('格式有误'))
				        } else {
				          callback()
				        }
				      }, 1000) */
			}
			const validateuserPassword = (rule, value, callback) => {

			}
			const validateuserMailbox = (rule, value, callback) => {
			/* 	var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (reg.test(value)) {
					callback();
				} else {
					callback(new Error('邮箱格式错误'));
				} */
			}
			const validateuserMobilePhone = (rule, value, callback) => {
				/* let reg = /^1\d{10}$/;
				if (reg.test(value)) {
					callback();
				} else {
					callback(new Error('请填写正确的手机号'));
				} */
			}
			return {
				formdate: {},
				userPasswordTwo: '',
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						validator: validateUserName,
						trigger: 'blur'
					}],
					userPassword: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							validator: validateuserPassword,
							trigger: 'blur'
						}
					],
					userMailbox: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: validateuserMailbox,
							trigger: 'blur'
						}
					],
					userMobilePhone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: validateuserMobilePhone,
						trigger: 'blur'
					}]

				}
			}
		},
		mounted: function() {

		},
		methods: {
			reginster() {
				if (this.formdate.userPassword != this.userPasswordTwo) {
					this.$message.info("密码不一致");
					return;
				} else {
					post("/saveUser", this.formdate).then(res => {
						this.$message.info(res.data.data[1]);
					});
				}

			}
		},
	}
</script>

<style scoped>
	* {
		position: relative;
	}

	h1 {
		left: 50%;
		top: 100px;
	}

	.form {
		width: 100%;
		height: 100%;
		margin: auto;
		background-image: url(../../assets/201741-1551010661d1ea.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.formMain {
		left: 30%;
		top: 150px;
	}

	label {
		color: black;
	}
</style>
